import { homeAgentChartStastic } from '@/services/stastica';
import { Pie } from '@ant-design/plots';
import { StatisticCard } from '@ant-design/pro-components';
import { useMount, useRequest } from 'ahooks';
import { theme } from 'antd';
import React from 'react';
const { Statistic } = StatisticCard;

const OrderTotalStastica: React.FC = () => {
  const { token } = theme.useToken();
  /* const  data=[
    { type: '一级代理', value: 27 },
    { type: '二级代理', value: 25 },
    { type: '总结代理', value: 18 }
  ];*/
  const getTotal = (data: any[]) => {
    return data.reduce((sum, item) => sum + item.count, 0);
  };
  const { data, run } = useRequest(homeAgentChartStastic, { manual: true });

  function getConfigData(data: unknown) {
    return {
      data: data,
      angleField: 'count',
      colorField: 'name',
      innerRadius: 0.6,
      height: 285,
      style: {
        stroke: '#fff',
        inset: 1,
        radius: 10,
      },
      label: {
        text: 'count',
        style: {
          fontWeight: 'bold',
        },
      },
      legend: {
        color: {
          title: false,
          position: 'right',
          rowPadding: 5,
        },
      },
      annotations: [
        {
          type: 'text',
          style: {
            text: '代理总览   ',
            x: '50%',
            y: '50%',
            textAlign: 'center',
            fontSize: 20,
            fontStyle: 'bold',
          },
        },
      ],
    };
  }

  useMount(() => {
    run();
  });

  return (
    <StatisticCard
      title="代理总览"
      bordered={true}
      chart={
        <>
          <Pie {...getConfigData(data)} />
        </>
      }
    />
  );
};
export default OrderTotalStastica;
